import React, {useState, useRef} from 'react';
import {StyleSheet, View, ScrollView, Animated} from 'react-native';

const viewList = () => {
  const array = new Array(100).fill('').map((item, index) => index);
  return (
    <>
      {array.map((item, index) => (
        <View
          key={item}
          style={{
            width: 60,
            height: 100,
            backgroundColor: colors[index % 5],
          }}
        />
      ))}
    </>
  );
};

const colors = ['red', 'green', 'blue', 'yellow', 'orange'];
const 跟随动画延迟难题9_10 = () => {
  // const [scrollY, setScrollY] = useState(0); 
  const scrollY = useRef(new Animated.Value(0)).current;

  console.log(scrollY, '------scrollY');
  return (
    <View style={styles.root}>
      <View style={styles.leftLayout}>
        <Animated.View
          style={{
            width: 60,
            transform: [
              // {translateY: -scrollY},
              {translateY: Animated.multiply(-1, scrollY)},
            ],
          }}>
          {viewList()}
        </Animated.View>
      </View>

      <View style={styles.rightLayout}>
        <Animated.ScrollView
          showsVerticalScrollIndicator={false}
          // onScroll={event => { // 这个onsroll是异步，然后改变数据，然后再渲染视图
          //   setScrollY(event.nativeEvent.contentOffset.y);
          // }}
          onScroll={Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: {y: scrollY},
                },
              },
            ],
            {
              useNativeDriver: true,
              listener: event => {
                // listener: 可选的异步监听函数;
                //     console.log(event);
              },
          },
          )}
        >
          {viewList()}
        </Animated.ScrollView>
      </View>
    </View>
  );
};

export default 跟随动画延迟难题9_10;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 780,
    overflow: 'hidden',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  leftLayout: {
    width: 60,
    backgroundColor: '#00FF0030',
    flexDirection: 'column',
  },
  rightLayout: {
    width: 60,
    height: '100%',
    backgroundColor: '#0000FF30',
    marginLeft: 100,
  },
});
